<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .button{
				display:flex;
				    justify-content: center;
				    align-items: center;
					color:#fff
			}
</style>
<body>
    <div id="app">
<button @click="text++">+</button>
{{text}}
<hr>
<q-button :round="true" width="200px" height="50" :text="text" @transfer="lanzi">按钮</q-button>
<hr>
    </div>
</body>
<script src="./vue.js"></script>
<script>
    const {ref,createApp,computed}=Vue
    const app=createApp({
        setup(){
            let text=ref(0)
            function lanzi(zhitiao){
                console.log(zhitiao)
                text.value=zhitiao
            }
            return{
text,lanzi
            }
        },
    })
    app.component('q-button',{
        props:{
            width:{
                type:[String,Number],
                default:"300px"
            },
            height:{
                type:[String,Number],
                default:"50px"
            },
            backgroundColor:{
                type:[String],
                default:"blue"
            },
            round:{
                type:[Boolean],
                default:false
            },
            roundSize:{
                type:Number,
                default:30
            },
            text:{
                type:[String,Number],
                default:'按钮'
            }

        },
        setup(props,{emit}){
let options=computed(function(){
    return props
})
function transform(n){
    return isNaN(Number(n))?n:n+'px'
}
function edit(){
    console.log(options.value.text)
    let text=options.value.text
    emit('transer',text+1)
}
            return{
options,transform,edit
            }
        },
        template:`
        <div class="button" :style="{
							width:transform(options.width),
							height:transform(options.height),
							backgroundColor:options.backgroundColor,
							borderRadius:options.round?options.roundSize+'px':0,
						}"
						
						@click="edit"
						
						>
				{{options.text}}
                <div><slot/></div>
				</div>
                `
    })
    app.mount('#app')
</script>
</html>